<template>
  <ac-icon
    iconId="018ece4f712124866f78"
    size="18"
    style="margin-left: 5px;flex-shrink: 0;cursor: pointer;"
    @click="show"
  />

  <el-dialog
    width="650px"
    v-model="paramVisible"
    title="模型参数设置"
    :close-on-click-modal="false"
    destroy-on-close
    append-to-body
  >
    <el-form
      label-width="100px"
      label-position="right"
      :model="paramData"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="预设参数">
            <div class="predefine">
              <div @click="predefineCreativity">创意</div>
              <div @click="predefineBalance">平衡</div>
              <div @click="predefinePrecise">精确</div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item>
            <template #label>
              <span>模型温度</span>
              <el-tooltip
                placement="left"
                popper-class="padding-10-15 width-200"
                content="值越大，回复内容越赋有多样性创造性、随机性；设为0根据事实回答，希望得到精准答案应该降低该参数；日常聊天建议0.5-0.8。"
              >
                <ac-icon iconId="018dca8ec9890493be26" />
              </el-tooltip>
            </template>
            <div style="display: flex">
              <ac-dict-switch v-model="paramData['use_temperature']" dictCode="dictYesNo" />
              <el-slider
                v-model="paramData['temperature']"
                :disabled="paramData['use_temperature'] !== '1'"
                :min="0.1"
                :max="1"
                :step="0.1"
                show-input
                style="margin-left: 20px;width: 370px"
              />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item>
            <template #label>
              <span>词汇属性</span>
              <el-tooltip
                placement="left"
                popper-class="padding-10-15 width-200"
                content="值越小，Ai生成的内容越单调也越容易理解；值越大，Ai回复的词汇围越大，越多样化。"
              >
                <ac-icon iconId="018dca8ec9890493be26" />
              </el-tooltip>
            </template>
            <div style="display: flex">
              <ac-dict-switch v-model="paramData['use_top_p']" dictCode="dictYesNo" />
              <el-slider
                v-model="paramData['top_p']"
                :disabled="paramData['use_top_p'] !== '1'"
                :min="0.1"
                :max="1"
                :step="0.1"
                show-input
                style="margin-left: 20px;width: 370px"
              />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item>
            <template #label>
              <span>话题属性</span>
              <el-tooltip
                placement="left"
                popper-class="padding-10-15 width-200"
                content="值越大，越能够让Ai更好地控制新话题的引入，建议微调或不变。"
              >
                <ac-icon iconId="018dca8ec9890493be26" />
              </el-tooltip>
            </template>
            <div style="display: flex">
              <ac-dict-switch v-model="paramData['use_presence_penalty']" dictCode="dictYesNo" />
              <el-slider
                v-model="paramData['presence_penalty']"
                :disabled="paramData['use_presence_penalty'] !== '1'"
                :min="-2"
                :max="2"
                :step="0.1"
                show-input
                style="margin-left: 20px;width: 370px"
              />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item>
            <template #label>
              <span>重复属性</span>
              <el-tooltip
                placement="left"
                popper-class="padding-10-15 width-200"
                content="值越大，越能够让Ai更好地避免重复之前说过的话，建议微调或不变。"
              >
                <ac-icon iconId="018dca8ec9890493be26" />
              </el-tooltip>
            </template>
            <div style="display: flex">
              <ac-dict-switch v-model="paramData['use_frequency_penalty']" dictCode="dictYesNo" />
              <el-slider
                v-model="paramData['frequency_penalty']"
                :disabled="paramData['use_frequency_penalty'] !== '1'"
                :min="-2"
                :max="2"
                :step="0.1"
                show-input
                style="margin-left: 20px;width: 370px"
              />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item>
            <template #label>
              <span>最大回复</span>
              <el-tooltip
                placement="left"
                popper-class="padding-10-15 width-200"
                content="设置Ai最大回复内容大小，会影响返回结果的长度。普通聊天建议500-800；短文生成建议800-2000；代码生成建议2000-3600；长文生成建议4000左右（或选择长回复模型)"
              >
                <ac-icon iconId="018dca8ec9890493be26" />
              </el-tooltip>
            </template>
            <div style="display: flex">
              <ac-dict-switch v-model="paramData['use_max_tokens']" dictCode="dictYesNo" />
              <el-slider
                v-model="paramData['max_tokens']"
                :disabled="paramData['use_max_tokens'] !== '1'"
                :min="1"
                :max="16000"
                :step="1"
                show-input
                style="margin-left: 20px;width: 370px"
              />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button
        size="default"
        type="info"
        @click="paramVisible=false"
      >取消</el-button>
      <el-button
        type="primary"
        size="default"
        @click="submit"
      >确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";

const modelValue = defineModel();
const paramVisible = ref(false);
const paramData = ref({});

const show = () => {
  if (modelValue.value) {
    paramData.value = JSON.parse(modelValue.value);
  } else {
    paramData.value = {};
  }
  paramVisible.value = true;
};

const predefineCreativity = () => {
  paramData.value['use_temperature'] = '1';
  paramData.value['temperature'] = 0.8;
  paramData.value['use_top_p'] = '1';
  paramData.value['top_p'] = 0.9;
  paramData.value['use_presence_penalty'] = '1';
  paramData.value['presence_penalty'] = 0.1;
  paramData.value['use_frequency_penalty'] = '1';
  paramData.value['frequency_penalty'] = 0.1;
  paramData.value['use_max_tokens'] = '0';
  paramData.value['max_tokens'] = null;
};

const predefineBalance = () => {
  paramData.value['use_temperature'] = '1';
  paramData.value['temperature'] = 0.5;
  paramData.value['use_top_p'] = '1';
  paramData.value['top_p'] = 0.8;
  paramData.value['use_presence_penalty'] = '1';
  paramData.value['presence_penalty'] = 0.2;
  paramData.value['use_frequency_penalty'] = '1';
  paramData.value['frequency_penalty'] = 0.3;
  paramData.value['use_max_tokens'] = '0';
  paramData.value['max_tokens'] = null;
};

const predefinePrecise = () => {
  paramData.value['use_temperature'] = '1';
  paramData.value['temperature'] = 0.2;
  paramData.value['use_top_p'] = '1';
  paramData.value['top_p'] = 0.7;
  paramData.value['use_presence_penalty'] = '1';
  paramData.value['presence_penalty'] = 0.5;
  paramData.value['use_frequency_penalty'] = '1';
  paramData.value['frequency_penalty'] = 0.5;
  paramData.value['use_max_tokens'] = '0';
  paramData.value['max_tokens'] = null;
};

const submit = () => {
  if (paramData.value.use_temperature === '1'
      || paramData.value.use_top_p === '1'
      || paramData.value.use_presence_penalty === '1'
      || paramData.value.use_frequency_penalty === '1'
      || paramData.value.use_max_tokens === '1') {
    modelValue.value = JSON.stringify(paramData.value);
  } else {
    modelValue.value = '';
  }

  paramVisible.value = false;
};
</script>

<style scoped>
.predefine {
  display: flex;
  > div {
    cursor: pointer;
    display: inline;
    line-height: 1.2;
    margin-right: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 5px 12px;
  }
}
</style>